<template>
	<view class="container">
		<view class="titmagin"></view>
		<view class="titlelunbo">预览卡片已经生成，点击卡片可查看跳转效果</view>
		<view class="hader" @tap.stop="tolinkorimg">
			<image class="img" :src="cardvalue.card_picture"></image>
			<view class="hader_main">
				<view class="mian_tit">{{ cardvalue.card_name }}</view>
				<view class="sub_tit">{{ cardvalue.card_describe }}</view>
				<view class="right_tit">30分钟内有效</view>
			</view>
			<view class="menban" @tap.stop="stop" v-if="!cardvalue.is_enabled">卡片已失效，客服审核后可使用</view>
		</view>
		<view class="title"> 
			<view class="block"></view>
			<view class="text">会员套餐</view>
		</view>
		<!-- 会员选项 -->
		<view class="vipchoice">
			<view :class="item.name==risk?'vipchoiceitem defult':'vipchoiceitem'" v-for="(item,index) in product" @tap="changevipitem(item)">
				<view class="vipchoicetop">
					<image class="vipchoicetop_img" :src="item.icon"></image>
					<view class="vipchoicetop_txt">{{ item.name }}</view>
				</view>	
				<view class="vipchoicebuttom">{{ item.desc }}</view>
				<image class="jiaobioao" v-show="item.name==risk" src="https://dysx-h5.shjiuliwl.com/Eblock/images/jiaobiao.png"></image>
			</view>
		</view>
		<view class="vipoption">
			<view class="vipoptiontit">
				<image class="img" src="https://dysx-h5.shjiuliwl.com/Eblock/images/tongzhi.png"></image>
				<view class="vipoptiontittxt">抖音私信卡片数量表示可在线同时生效数</view>
			</view>
			<view class="iteminput">
				<view class="input_text">抖音卡片数量</view>
				<image class="jianhaoimg" @tap="inputjian" src="https://dysx-h5.shjiuliwl.com/Eblock/images/jianhao.png"></image>
				<input class="mathematicsinput" v-model="card_count"/>
				<image class="jianhaoimg" @tap="inputjia" src="https://dysx-h5.shjiuliwl.com/Eblock/images/jiahao.png"></image>
			</view>
			<view class="vipdetails">
				<view class="vipdetailsitem">
					<view class="vipdetailsitemone">卡片有效期</view>
					<view class="vipdetailsitemone">无风险提示</view>
					<view class="vipdetailsitemone">套餐价格</view>
				</view>
				<view :class="item.id==product_risk_item.id?'packageSelection_defual':'packageSelection'"
				 v-for="(item,index) in product_risk.list" @tap="Selectid(item)">
					<view class="packageSelection_item">{{ item.exp_date_desc }}</view>
					<view class="packageSelection_item">{{ item.name=="有风险提示"?'不支持':'支持' }}</view>
					<view class="packageSelection_money">{{item.price/100}}元</view>
					<image class="jiaobiao" v-if="item.id==product_risk_item.id" src="https://dysx-h5.shjiuliwl.com/Eblock/images/jiaobiao2.png"></image>
				</view>
			</view>
			<view class="iteminput_bottom_text">{{product_risk_item.exp_date_desc}}会员，平均每个卡片价格：{{product_risk_item.price_desc/100}}/月</view>
		</view>
		<view class="title"> 
			<view class="block"></view>
			<view class="text">什么是有无风险提示？</view>
		</view>
		<!-- 视频 -->
		<view class="videomain">
			<video class="videoitem" src="https://dysx-h5.shjiuliwl.com/Eblock/images/shili.mp4" controls></video>
		</view>
		<view class="title"> 
			<view class="block"></view>
			<view class="text">支付方式</view>
		</view>
		<view class="payuse">
			<view class="payuseItem" v-for="(item,index) in payusevalue" @tap="changepay(item)">
				<image class="payuseItem_icon" :src="item.icon"></image>
				<view class="payuseItem_text">{{ item.name }}</view>
				<image class="payuseItem_def" v-if="payuse_def.value==item.value" src="https://dysx-h5.shjiuliwl.com/Eblock/images/xaunzhong.png"></image>
			</view>
		</view>	
		<view class="topay">
			<view class="topay_center">
				<view class="topay_center_top">{{ card_count }}个卡片（{{product_risk_item.exp_date_desc}}会员）</view>
				<view class="topay_center_bottom">合计：<span class="span1">￥{{ allmoney }}</span></view>
			</view>
			<view class="topay_click" @tap="topay">开通会员</view>
		</view>
	</view>
</template>

<script>
import { onGotApiData , getService } from '../../utils/api.js';
export default {
	data() {
		return {
			cardvalue: {}, // 获取到卡片的信息
			risk: "有风险提示", //有无风险选项
			product:[],  //产品
			product_risk:{}, // 选择有无风险
			product_risk_item:[], //选择的套餐
			card_count:0, //输入框卡片的数量
			payusevalue:[], //支付方式
			payuse_def:{}, //选中的支付方式
			allmoney:0,//最终的价格s
			channel_no:'',
			link:'',//首页地址
			code:'',//code值
		}	
	},
	onLoad(e){
		console.log('e',e.code)
		this.code = e.code
		this.channel_no = uni.getStorageSync('EK_channel_no')
		this.link = uni.getStorageSync('EK_indexhref')
		// 请求卡片
		this.getcard()

		// 请求参品
		this.getproduct()
		// 获取支付方式
		this.getpayuse()
	},
	onShow() {

	},
	onReady() {
    // 页面初次渲染完成时执行的代码

	},
	onHide() {
    // 页面隐藏时执行的代码
	},
	onUnload() {
    // 页面卸载时执行的代码
	},
	// 生命周期的第四个函数，在该函数将数据渲染到页面上，生成真实dom
	mounted(){

	},
	watch: {
		card_count: {
        immediate: true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue, oldValue) {
          console.log('卡片数量改变了', newValue)
		  console.log("product_risk_item",this.product_risk_item)
		  this.allmoney = (this.product_risk_item.price / this.product_risk_item.card_count) * newValue/100
        }
      },
	  product_risk_item: {
        immediate: true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue, oldValue) {
          console.log('套餐改变了', newValue)
		  console.log("product_risk_item",this.product_risk_item)
		  this.allmoney = this.product_risk_item.price / 100
        }
      },
    },
	methods: {
		// 获取卡片基础信息
		getcard () {
			const params = {
				code: this.code
			}
			onGotApiData('/api/card/v1/get','GET',params,this.card_value)
		},
		// 获取基础信息结果
		card_value (result) {
			console.log('result1',result)
			this.cardvalue  = result.data
		},
		// 吊起获取客服联系客服接口
		getservicelink () {
			// 复制文本到剪切板
			uni.setClipboardData({
				data: this.$route.query.code,
				success: function() {
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			})
			const href = uni.getStorageSync('indexhref')
			const params = {
				link: href,
				subject:'ppz'
			}
			getService('/api/kefu/douyin_kefu','POST',params,this.Service_value)
		},
		Service_value (result) {
			window.location.href = result.data
		},
		// 点击卡片跳转微信小程序
		tolinkorimg () {
			window.location.href = this.cardvalue.card_url

			const params = {
				code: this.code,
				env_version:'release'
			}
			// onGotApiData('/api/wx_xcx/jump_xcx','GET',params,this.towx)
		},
		towx(result){
			console.log('跳转到微信',result)
			window.location.href = result.data.openlink
		},
		// 获取产品	
		getproduct() {
			const params = {
				channel_no: this.channel_no
			}
			onGotApiData('/api/product/v1/list','GET',params,this.getproduct_value)
		},
		// 获取产品的结果
		getproduct_value(result) {
			this.product = result.data
			console.log('产品结果',this.product)
			// 选择第一个无风险
			this.product_risk = this.product[0]
			console.log('有无风险',this.product_risk)
			this.risk = this.product_risk.name
			this.product_risk_item = this.product_risk.list[0] 
			console.log('选项',this.product_risk_item)
			this.card_count = this.product_risk_item.card_count
		},
		// 点击有无风险选择
		changevipitem(item){
			this.product_risk = item
			this.product_risk_item = this.product_risk.list[0] 
			this.risk = item.name
			console.log("aa",this.product_risk_item)
			this.card_count = this.product_risk_item.card_count
		},
		Selectid(item){
			this.product_risk_item = item
			this.card_count = this.product_risk_item.card_count
		},
		// 输入框的加减
		inputjian(){
			if(this.card_count > 2){
				this.card_count --
			}else{
				uni.showToast({
					title: '卡片数量最少两张',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
			}
		},
		inputjia(){
			this.card_count ++
		},

		// 请求支付方式的方式
		getpayuse(){
			const params = {
				channel_no: this.channel_no,
			}
			onGotApiData('/api/order/query_pay_type','GET',params,this.getpayuse_value)
		},
		getpayuse_value(result){
			console.log('获取支付方式',result.data)
			result.data.forEach((item,index) => {
				if(item=="ZFB_H5"){
					const obj = {
						name:'支付宝',
						value:item,
						icon:'https://dysx-h5.shjiuliwl.com/Eblock/images/zfb.png',
					}
					this.payusevalue.push(obj)
				}else if(item=="WX_H5"){
					const obj = {
						value:item,
						name:'微信',
						icon:'https://dysx-h5.shjiuliwl.com/Eblock/images/wx.png',
					}
				this.payusevalue.push(obj)
				}
			});
			this.payuse_def = this.payusevalue[0]
		},
		// 切换支付方式
		changepay(item){
			this.payuse_def = item
		},
		// 点击提交订单
		topay(){
			// return 	uni.navigateTo({
			// 			url: '/pages/orderResults/orderResults'
			// 		});

			// 处理一下穿过去的首页链接
			const url = uni.getStorageSync('EK_indexhref')
			const htmlIndex = url.indexOf('.html');
			// 如果找到了 .html，则截取之前的部分，否则保持原样
			const newUrl = htmlIndex !== -1 ? url.slice(0, htmlIndex + 5) : url;
			const processedUrl = newUrl + '#/pages/orderResults/orderResults'
			// console.log('地址',url)
			// console.log('地址1',htmlIndex)
			// console.log('地址2',newUrl)
			// console.log('地址3',htmlIndex !== -1)
			// console.log('地址4',url.slice(0, htmlIndex + 5))
			// console.log("5",processedUrl)
			const params = {
				channel_no: this.channel_no,
				card_code:this.code,
				product_id: this.product_risk_item.id,
				pay_type: this.payuse_def.value,
				return_url: processedUrl,
				link: this.link,
				phone:this.cardvalue.card_phone,
				card_count:this.card_count,
			}
			onGotApiData('/api/order/v1/create','POST',params,this.topay_value)
		},
		// 创建订单成功接口
		topay_value(result){
			console.log(result)
			window.location.href = result.data.payUrl
		},


		stop () {
			console.log('我已经失效了宝宝')
		},
	}
}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		// width: 750rpx auto;
		background: linear-gradient(90deg, rgba(163, 188, 255, 1) 0%, rgba(115, 149, 250, 1) 100%);
		.titmagin{
			width: 750rpx;
			height: 30rpx;
		}
		.titlelunbo{
			width: 720rpx;
			height: 50rpx;
			margin: 0 auto;
			border-radius: 8rpx;
			background: rgba(242, 242, 242, 1);
			font-size: 28rpx;
			line-height: 50rpx;
			color: rgba(255, 87, 51, 1);
			text-align: center;
		}
		.title{
			width: 750rpx;
			height: 60rpx;
			padding-top: 20rpx;
			// background-color: pink;
			// border: 1px solid black;
			margin: 0 auto;
			display: flex;
			.block{
				width: 8rpx;
				height: 32rpx;
				background-color: rgba(15, 74, 252, 1);
				margin: 14rpx 0 0 16rpx;
				border-radius: 4rpx;
			}
			.text{
				width: 600rpx;
				height: 60rpx;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 60rpx;
				color: rgba(255, 255, 255, 1);
				margin: 0 0 0 10rpx;
			}
		}
		.hader{
			width: 720rpx;
			height: 210rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			display: flex;
			position: relative;
			.img{
				width: 200rpx;
				height: 200rpx;
				margin: 5rpx;
				border-radius: 10rpx;
			}
			.hader_main{
				width: 490rpx;
				height: 220rpx;
				margin: 0 0 0 20rpx;
				position: relative;
				.mian_tit{
					width: 490rpx;
					height: 90rpx;
					font-size: 36rpx;
					font-weight: 400;
					line-height: 50rpx;
					margin-top: 30rpx;
					// border: 1px solid black;
					color: rgba(56, 56, 56, 1);
					white-space: nowrap; /* 不换行 */
					overflow: hidden; /* 超出部分隐藏 */
					text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
				}
				.sub_tit{
					width: 490rpx;
					height: 60rpx;
					font-size: 30rpx;
					font-weight: 400;
					line-height: 30rpx;
					color: rgba(150, 149, 149, 1);
				}
				.right_tit{
					width: 160rpx;
					height: 36rpx;
					border-radius: 0px 6px 0px 2px;
					background: linear-gradient(90deg, rgba(255, 124, 71, 1) 0%, rgba(255, 74, 3, 1) 100%);
					box-shadow: 0px 2px 4px  rgba(212, 48, 48, 0.25);
					position: absolute;
					top: 0;
					right: -2rpx;
					font-size: 22rpx;
					line-height: 36rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					text-align: center;
				}
			}
			.menban{
				width: 720rpx;
				height: 210rpx;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.8);
				font-size: 44rpx;
				font-weight: 700;
				line-height: 210rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
		}
		// 会员部分
		.vipchoice{
			width: 720rpx;
			height: 200rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			.vipchoiceitem{
				width: 350rpx;
				height: 160rpx;
				background-color: #fff;
				border-radius: 10rpx;
				border-right: 1px solid rgba(51, 102, 255, 1);
				border-left: 1px solid rgba(51, 102, 255, 1);
				border-top: 1px solid rgba(51, 102, 255, 1);
				.vipchoicetop{
					width: 320rpx;
					height: 70rpx;
					margin: 0 auto;
					margin-top: 8rpx;
					// border: 1px solid black;
					z-index: 9;
					display: flex;
					.vipchoicetop_img{
						width: 48rpx;
						height: 48rpx;
						margin: 12rpx 0 0 2rpx;
					}
					.vipchoicetop_txt{
						width: 240rpx;
						height: 48rpx;
						// border: 1px solid black;
						margin: 10rpx 0 0 6rpx;
						font-size: 36rpx;
						line-height: 48rpx;
						color: rgba(56, 56, 56, 1);
					}
				}
				.vipchoicebuttom{
					width: 300rpx;
					height: 50rpx;
					// border: 1px solid black;
					margin: 0 auto;
					font-size: 28rpx;
					line-height: 50rpx;
					color: rgba(166, 166, 166, 1);
				}
				.jiaobioao{
				width: 53rpx;
				height: 38rpx;
					// margin: 0 auto;
				margin: 4rpx 0 0 100rpx;
				}
			}
			.defult{
				background: linear-gradient(131.11deg, rgba(133, 163, 255, 1) 0%, rgba(82, 125, 255, 1) 100%);
				border-right: 1px solid rgba(15, 74, 252, 1);
				border-left: 1px solid rgba(15, 74, 252, 1);
				border-top: 1px solid rgba(15, 74, 252, 1);
				box-shadow: 6px -6px 7px  rgba(255, 255, 255, 0.25);
				.vipchoicetop{
					.vipchoicetop_txt{
						color: rgba(255, 255, 255, 1);
					}
				}
				.vipchoicebuttom{
					color: rgba(235, 240, 255, 1);
				}
			}

		}
		.vipoption{
			width: 750rpx;
			border-radius: 10rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			background-color: rgba(243, 243, 243, 1);
			margin: 0 auto;
			margin-top: -40rpx;
			z-index: 99;
			.vipoptiontit{
				width: 710rpx;
				height: 65rpx;
				margin:  0 auto;
				background-color: rgba(204, 217, 255, 1);
				border-radius: 40rpx;
				display: flex;
				.img{
					width: 48rpx;
					height: 48rpx;
					margin: 8rpx 30rpx;
				}
				.vipoptiontittxt{
					width: 600rpx;
					height: 65rpx;
					font-size: 28rpx;
					line-height: 65rpx;
					color: rgba(54, 104, 255, 1);
				}
			}
			.iteminput{
				width: 710rpx;
				height: 110rpx;
				border-radius: 10rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				// border: 1px solid black;
				background: rgba(255, 255, 255, 1);
				display: flex;
				.input_text{
					width: 210rpx;
					height: 110rpx;
					// border: 1px solid black;
					font-size: 28rpx;
					text-align: center;
					margin: 0 110rpx 0 20rpx;
					line-height: 110rpx;
					color: rgba(0, 0, 0, 1);
				}
				.jianhaoimg{
					width: 48rpx;
					height: 48rpx;
					margin: 31rpx 0rpx;
					// border: 1px solid black;
				}
				.mathematicsinput{
					width: 190rpx;
					height: 60rpx;
					border-radius: 10rpx;
					margin: 25rpx 20rpx;
					border: 1px solid black;
					text-align: center;
					line-height: 60rpx;
					font-size: 38rpx;
				}
			}	
			.vipdetails{
				width: 710rpx;
				height: 270rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				border-radius: 6px;
				background: rgba(255, 255, 255, 1);
				display: flex;
				.vipdetailsitem{
					width: 230rpx;
					height: 270rpx;
					.vipdetailsitemone{
						width: 200rpx;
						height: 90rpx;
						padding-left: 30rpx;
						font-size: 28rpx;
						line-height: 90rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
					}
				}
				.packageSelection{
					width: 230rpx;
					height: 270rpx;
					.packageSelection_item{
						font-size: 28rpx;
						line-height: 90rpx;
						color: rgba(128, 128, 128, 1);
						text-align: center;
					}
					.packageSelection_money{
						font-size: 28rpx;
						line-height: 90rpx;
						color: rgba(10, 71, 255, 1);
						text-align: center;
					}
				}
				.packageSelection_defual{
					width: 230rpx;
					height: 290rpx;
					border-radius: 6px;
					margin-top: -10rpx;
					padding-top: 10rpx;
					background: linear-gradient(180deg, rgba(163, 186, 255, 0.8) 0%, rgba(82, 125, 255, 0.8) 100%);
					box-shadow: 1px 2px 2px  rgba(0, 0, 0, 0.25);
					position: relative;
					.packageSelection_item{
						width: 230rpx;
						height: 90rpx;
						font-size: 28rpx;
						line-height: 90rpx;
						color: rgba(66, 109, 237, 1);
						text-align: center;
					}
					.packageSelection_money{
						width: 230rpx;
						height: 90rpx;
						font-size: 32rpx;
						line-height: 90rpx;
						font-weight: 700;
						color: rgba(10, 71, 255, 1);
						text-align: center;
					}
					.jiaobiao{
						width: 100rpx;
						height: 100rpx;
						position: absolute;
						top: -28rpx;
						left: 156rpx;
					}
				}
			}
			.iteminput_bottom_text{
				width: 700rpx;
				height: 40rpx;
				margin-top: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: rgba(255, 87, 51, 1);
				text-align: center;
			}
		}
		.videomain{
			width: 730rpx;
			height: 400rpx;
			margin: 0 auto;
			margin-top:20rpx;
			border: 1px solid black;
			.videoitem{
				width:100%;
				height:400rpx;
			}
		}
		.payuse{
			width: 705rpx;
			height: 190rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			margin-bottom: 180rpx;
			.payuseItem{
				width: 690rpx;
				height: 90rpx;
				// border: 1px solid black;
				display: flex;
				.payuseItem_icon{
					width: 48rpx;
					height: 48rpx;
					margin: 21rpx 0 0 30rpx;
				}
				.payuseItem_text{
					width: 500rpx;
					height: 90rpx;
					margin: 0 0 0 30rpx;
					// border: 1px solid black;
					line-height: 86rpx;
				}
				.payuseItem_def{
					width: 42rpx;
					height: 42rpx;
					margin: 24rpx 0 0 10rpx;
				}
			}
		}
		.topay{
			width: 750rpx;
			height: 130rpx;
			margin-top: 60rpx;
			background: rgba(255, 255, 255, 1);
			position: fixed;
			bottom: 0;
			z-index: 999;
			display: flex;
			.topay_center{
				width: 450rpx;
				height: 110rpx;
				padding-top: 10rpx;
				.topay_center_top{
					font-size: 28rpx;
					line-height: 50rpx;
					color: rgba(56, 56, 56, 1);
					text-indent: 1em;
				}
				.topay_center_bottom{
					font-size: 28rpx;
					font-weight: 700;
					line-height: 50rpx;
					color: rgba(0, 0, 0, 1);
					text-indent: 1em;
					.span1{
						font-size: 36rpx;
						font-weight: 700;
						color: rgba(255, 87, 51, 1);
					}
				}
			}
			.topay_click{
				width: 300rpx;
				height: 130rpx;
				background: linear-gradient(270deg, rgba(51, 102, 255, 1) 0%, rgba(115, 149, 250, 1) 100%);
				box-shadow: 0px 8px 5px  rgba(0, 0, 0, 0.25);
				font-size: 40rpx;
				line-height: 130rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;

			}	
		}
	}
</style>
